<script setup lang="ts">
import { reactive, onMounted } from "vue";
import api_collect from "@/api/blog/collect";
import apiRead from "@/api/blog/read";
import { useRouter } from "vue-router";
import { getDict } from "@/utils/local";
let router = useRouter();
let state = reactive({
    list: [] as any[],
    activeName: 1
});
onMounted(async () => {
    const res: any = await api_collect.getlist({});
    state.list = dealList(res.data);
});
//处理数据
const dealList = (list: Array<any>) => {
    //获取collect_type所有的子项
    const dict = getDict('collect_type');
    const arr = dict?.map((item: any) => {
        return { type: item.value, label: item.label, child: [] };
    });

    arr?.forEach((item: any) => {
        const matchingChild = list.filter((cItem) => cItem.type === item.type);
        if (matchingChild) {
            item.child.push(...matchingChild);
        }
    });

    //将 type==‘other’ 排入最后
    arr.sort((a: any, b: any) => (a.type === 'other' ? 1 : b.type === 'other' ? -1 : 0))

    return arr;
};
const open = (item: any) => {
    console.log('open',item)
    window.open(item.targetUrl)
    readCollect(item._id)
}
//点击分享
const readCollect = (_id: any) => {
    api_collect.readCollect({ _id })//具体的分享阅读加1
    apiRead.update({ path: router.currentRoute.value.name })//总的分享+1

}

</script>
<template>
    <div class="collect-warp">

        <el-collapse v-model="state.activeName" accordion>
            <el-collapse-item v-for="item in state.list" :title="item.label" :name="item.type">
                <div class="collect-item-warp">
                    <el-link @click="open(cItem)" class="collect-item" v-for="cItem in item.child"> {{
                        cItem.title }}
                    </el-link>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<style lang="scss" scoped>
.collect-item-warp {
    display: flex;
    flex-direction: column;

    .collect-item {
        width: max-content;
    }
}
</style>

<style lang="scss">
.collect-warp {
    padding-left: 20px;

    .el-collapse-item__header {
        font-size: 16px;
        font-weight: 700;
    }

    .collect-item {
        margin-left: 20px;

        font-size: 14px;
        line-height: 40px;
    }
}
</style>